<button class="btn btn-dark" (click)="toTopOfScreen()" id="toTopButton" title="Go to top">
    <img class="img-fluid cardIcon" id="topBtn" src="{{'assets/images/btn_arrow.png'}}">
</button>
<div *ngIf="isLoaded == false" class="loader" id="backdrop">
    <div class="spinner-border text-light" role="status">
        <span class="sr-only mx-auto">Loading...</span>
    </div>
</div>

<div class="row justify-content-center">
    <div *ngIf="lang != 'zh'" class="col-10 text-center bg-dark p-4 my-2">
        <p>The information of card that not being implemented in Global server will remain in Chinese</p>
    </div>
</div>
<div class="row justify-content-center p-2">
    <div class="col-12 col-md-10 row justify-content-around m-2">
        <div class="col">
            <label for="character">{{'KEYWORD.CHARACTER' | translate}}</label>
            <select [(ngModel)]="filterConditions[0]" (ngModelChange)="filterCards()" class="custom-select"
                name="character">
                <option value="All">All</option>
                <option value="LUKE">{{'KEYWORD.LUKE' | translate}}</option>
                <option value="ARTEM">{{'KEYWORD.ARTEM' | translate}}</option>
                <option value="VYN">{{'KEYWORD.VYN' | translate}}</option>
                <option value="MARIUS">{{'KEYWORD.MARIUS' | translate}}</option>
            </select>
        </div>
        <div class="col">
            <label for="rarity">{{'KEYWORD.RARITY' | translate}}</label>
            <select [(ngModel)]="filterConditions[1]" (ngModelChange)="filterCards()" class="custom-select"
                name="rarity">
                <option value="All">All</option>
                <option value="R">R</option>
                <option value="MR">MR</option>
                <option value="SR">SR</option>
                <option value="SSR">SSR</option>
            </select>
        </div>
        <div class="col">
            <label for="type">{{'KEYWORD.TYPE' | translate}}</label>
            <select [(ngModel)]="filterConditions[2]" (ngModelChange)="filterCards()" class="custom-select" name="type">
                <option value="All">All</option>
                <option value="LOGIC">{{'KEYWORD.LOGIC' | translate}}</option>
                <option value="EMPATHY">{{'KEYWORD.EMPATHY' | translate}}</option>
                <option value="INTUITION">{{'KEYWORD.INTUITION' | translate}}</option>
            </select>
        </div>
        <div class="col">
            <label for="type">{{'KEYWORD.OBTAINED-FROM' | translate}}</label>
            <select [(ngModel)]="filterConditions[3]" (ngModelChange)="filterCards()" class="custom-select" name="type">
                <option value="All">All</option>
                <option value="PERMENENT">{{'KEYWORD.PERMENENT' | translate}}</option>
                <option value="ROTATION">{{'KEYWORD.ROTATION' | translate}}</option>
                <option value="CHARGE">{{'KEYWORD.CHARGE' | translate}}</option>
                <option value="CARD-FRAGMENT">{{'KEYWORD.CARD-FRAGMENT' | translate}}</option>
                <option value="EVENT">{{'KEYWORD.EVENT' | translate}}</option>
                <option value="LIMITED-EVENT">{{'KEYWORD.LIMITED-EVENT' | translate}}</option>
            </select>
        </div>
        <div class="col-1">
            <a (click)="resetFilters()">
                <img src="assets/images/btn_reset.png">
            </a>
        </div>
    </div>
    <div class="col-12 col-md-10 my-2">
        <table class="table table-sm table-dark text-center">
            <thead>
                <tr>
                    <th>{{'KEYWORD.ICON' | translate}}</th>
                    <th>{{'KEYWORD.NAME' | translate}}</th>
                    <th class="d-none d-sm-table-cell">{{'KEYWORD.RARITY' | translate}}</th>
                    <th class="d-none d-sm-table-cell">{{'KEYWORD.TYPE' | translate}}</th>
                    <th>
                        <span class="sort-header" (click)="toggleSortHeader(0)">
                            <img class="img-fluid icon" src="assets/images/influence.png" title="Influence">
                            <mat-icon aria-hidden="false">{{arrows[tableSortArrow[0]]}}</mat-icon>
                        </span>

                    </th>
                    <th>
                        <span class="sort-header" (click)="toggleSortHeader(1)">
                            <img class="img-fluid icon" src="assets/images/defense.png" title="Influence">
                            <mat-icon aria-hidden="false">{{arrows[tableSortArrow[1]]}}</mat-icon>
                        </span>
                    </th>
                    <th>{{'KEYWORD.SKILL' | translate}}</th>
                    <th>{{'KEYWORD.OBTAINED-FROM' | translate}}</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let c of cards">
                    <td>
                        <a [routerLink]="['/card-value/']" [queryParams]="{id: c._id}" target="_blank">
                            <img class="img-fluid cardIcon" src="{{imgURL + c.character + '/' + c.ref + '.webp'}}">
                        </a>
                    </td>
                    <td>
                        <a [routerLink]="['/card-value/']" [queryParams]="{id: c._id}" target="_blank">
                            {{c.n}}
                        </a>
                    </td>
                    <td class="d-none d-sm-table-cell">{{c.rarity}}</td>
                    <td class="d-none d-sm-table-cell">
                        <img class="img-fluid icon" src="{{'assets/images/' + c.type + '.png'}}">
                    </td>
                    <td>{{setFullRankStatistic(c.influence)}}</td>
                    <td>{{setFullRankStatistic(c.defense)}}</td>
                    <td>
                        <!-- <span *ngFor="let s of c.skills"> -->
                        <span *ngFor="let s of c.skillObj">
                            <a [routerLink]="['/skill/']" [queryParams]="{id: s._id}" target="_blank">
                                <img class="img-fluid icon" src="{{imgURL + '技能/' + s.ref + '.webp'}}" title="{{s.n}}">
                            </a>
                        </span>
                    </td>
                    <td>
                        <span class="smallFont" *ngFor="let o of c.obtainedFrom">
                            {{'KEYWORD.' + o | translate}}<br />
                        </span>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>